<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootcss</title>
    <!--以下meta是实现移动设备优先的-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <hr>
    <span class="glyphicon glyphicon-music"></span>
    <span class="glyphicon glyphicon-star"></span>
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-headphones"></span>
    <span class="glyphicon glyphicon-camera"></span>
    <span class="glyphicon glyphicon-tint"></span>
    <hr>
    <form action="">
        <div class="form-group has-error">
            <label class="control-label">用户名</label><input class="form-control" type="text">
        </div>
        <div class="form-group has-success">
            <label class="control-label">用户名</label><input class="form-control" type="text">
        </div>
        <div class="form-group has-warning">
            <label class="control-label">用户名</label><input class="form-control" type="text">
        </div>
    </form>

    <hr>
    <form>
        <select class="form-control" name="s1" id="s1">
            <option value="">linux</option>
            <option value="">python</option>
            <option value="">network</option>
        </select>
    </form>

    <hr>
    <form>
        <div class="checkbox">
            <label><input type="checkbox">linux</label>
        </div>
        <div class="checkbox disabled">
            <label><input type="checkbox" disabled>python</label>
        </div>
    </form>

    <hr>
    <form role="form">
        <div class="input-group">
            <div class="input-group-addon">￥</div>
            <input class="form-control" type="text">
            <div class="input-group-addon">.00</div>
        </div>
    </form>

    <hr>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label>用户：</label><input class="form-control" type="text">
        </div>
        <div class="form-group">
            <label>密码：</label><input class="form-control" type="password">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary">
        </div>
    </form>
    <hr>
    <!--向父 <form> 元素添加 role="form"。-->
    <!--把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。-->
    <!--向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。-->
    <form role="form">
        <div class="form-group">
            <label>用户：</label><input class="form-control" type="text">
        </div>
        <div class="form-group">
            <label>密码：</label><input class="form-control" type="password">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary">
        </div>
    </form>

    <hr>
    <input class="btn" type="button" value="按 钮">
    <input class="btn btn-default" type="button" value="按 钮">
    <input class="btn btn-primary" type="button" value="按 钮">
    <input class="btn btn-danger" type="button" value="按 钮">
    <input class="btn btn-info" type="button" value="按 钮">
    <input class="btn btn-warning" type="button" value="按 钮">
    <input class="btn btn-success" type="button" value="按 钮">
    <input class="btn btn-primary btn-lg" type="button" value="按 钮">
    <input class="btn btn-primary btn-sm" type="button" value="按 钮">
    <input class="btn btn-primary btn-xs" type="button" value="按 钮">
    <input class="btn btn-primary btn-block" type="button" value="按 钮">

    <hr>
    <table class="table table-bordered table-striped table-hover">
        <tr class="info">
            <td>姓名</td>
            <td>性别</td>
            <td>城市</td>
        </tr>
        <tr>
            <td>李严</td>
            <td>男</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李青松</td>
            <td>男</td>
            <td>成都</td>
        </tr>
        <tr>
            <td>朱佳明</td>
            <td>男</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>吴达明</td>
            <td>男</td>
            <td>深圳</td>
        </tr>
    </table>


    <hr>
    <h1>BOOTSTRAP网页制作</h1>
    <h2>BOOTSTRAP网页制作</h2>
    <h3>BOOTSTRAP网页制作</h3>
    <h4>BOOTSTRAP网页制作</h4>
    <h5>BOOTSTRAP网页制作</h5>
    <h6>BOOTSTRAP网页制作</h6>
    <p class="h3 text-center">您可以按<kbd>ctrl + c</kbd>来<del>强制</del>中断程序</p>
    <p class="h3">您可以按<kbd>ctrl + c</kbd>来强制<strong>中断</strong>程序</p>
    <p class="h3">您可以按<kbd>ctrl + c</kbd>来强制中断程序</p>
</div>
</body>
</html>